<template>
  <list-data ref="ListData" @remove-item="removeBtnClick">
    <template v-slot:header-left>
      <el-button type="primary" size="small" @click="addBtnClick">添加</el-button>
      <el-button type="primary" size="small" @click="recycleBtnClick">回收站</el-button>
      <slot name="header-left"></slot>
    </template>
    <template v-slot:header-center>
      <slot name="header-center"></slot>
    </template>
    <template v-slot:header-righr>
      <slot name="header-righr"></slot>
    </template>
    <template slot="option" slot-scope="scope">
      <el-button type="text" size="small" @click="editBtnClick(scope.model)">编辑</el-button>
    </template>
    <add-pop ref="AddPop" :pop-width="popWidth" @success="addSuccess" :get-data-fun="getAddDataFun">
      <slot name="add"></slot>
    </add-pop>
    <slot />
  </list-data>
</template>

<script lang="ts">
  import {Vue, Component, Prop} from 'vue-property-decorator'
  import ListData from './com/list/index.vue'
  import AddPop from './addPop.vue'
  import { AddPopType } from './types'
  import DataModel from "@/models/DataModel";
  import YBPopView from "@/utils/popView";
  import { ListComType } from './com/list/types'

  @Component({
    components: {
      ListData,
      AddPop
    }
  })
  export default class DataArray extends Vue {

    @Prop({ type: Function }) getAddDataFun!: Function
    @Prop({ type: Number, default: 600 }) popWidth!: number

    reloadData() {
      (this.$refs.ListData as ListComType).reloadData()
    }

    addBtnClick() {
      (this.$refs.AddPop as AddPopType).show()
      this.$emit('addClick')
    }

    addSuccess() {
      this.reloadData()
      this.$emit('addSuccess')
    }

    recycleBtnClick() {
      const { id } = this.$route.params
      this.$router.push(`/project/model/array/recycle/${id}`)
    }

    // 删除
    removeBtnClick(model: DataModel) {
      model.arrayListRecyclePush().then(() => {
        YBPopView.msgSuccess('删除成功')
        this.reloadData()
      })
    }

    // 编辑
    editBtnClick(model: DataModel) {
      (this.$refs.AddPop as AddPopType).show(model)
      this.$emit('edit-click', model)
    }
  }

</script>

<style scoped lang="scss">

</style>
